<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: HeAo
 * @LastEditTime: 2022-01-06 19:39:29
-->
<template>
  <!-- 1. 容器 -->
  <div id="left2" style="height: 95%"></div>
</template>

<script>
// 2. 导入图表构造函数
import { Pie } from "@antv/g2plot";
import { get } from "../../../utils/request";
export default {
  data() {
    return {
      dd: [],
    };
  },
  async mounted() {
    // 4. 查询数据
    await this.loadData();
    // 5. 页面渲染的时候初始化图表
    this.initChart();
  },
  methods: {
    // 查询统计数据 ajax  异步的javascript和xml
    async loadData() {
      let url = "/dashboard/queryDeviceOnlineNumber";
      let resp = await get(url);
      this.dd = resp.data;
    },
    //3. 初始化图表
    initChart() {
      const data = this.dd;
      const piePlot = new Pie("left2", {
        appendPadding: 10,
        data,
        angleField: "value",
        colorField: "type",
        radius: 1,
        innerRadius: 0.64,
        meta: {
          value: {
            formatter: (v) => ` ${v}`,
          },
        },
        label: {
          type: "inner",
          offset: "-50%",
          autoRotate: false,
          style: { textAlign: "center" },
          formatter: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
        },
        statistic: {
          title: {
            offsetY: -8,
          },
          content: {
            offsetY: -4,
          },
        },
        // 添加 中心统计文本 交互
        interactions: [
          { type: "element-selected" },
          { type: "element-active" },
          {
            type: "pie-statistic-active",
            cfg: {
              start: [
                {
                  trigger: "element:mouseenter",
                  action: "pie-statistic:change",
                },
                {
                  trigger: "legend-item:mouseenter",
                  action: "pie-statistic:change",
                },
              ],
              end: [
                {
                  trigger: "element:mouseleave",
                  action: "pie-statistic:reset",
                },
                {
                  trigger: "legend-item:mouseleave",
                  action: "pie-statistic:reset",
                },
              ],
            },
          },
        ],
      });

      piePlot.render();
    },
  },
};
</script>